<html>
  <head>
    <title>富文本</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style>
      .commandZone {
        margin: 20px;
        margin-bottom: 0px;
        background: burlywood;
      }
      .editor {
        border: 1px solid gray;
        margin: 0px 20px 20px 20px;
        height: 300px;
        overflow: auto;
        width: 300px;
      }
      .btn {
        margin: 10px 20px;
        color: black;
        font-size: 20px;
        line-height: 20px;
        display: inline;
      }
    </style>
  </head>
  <body>
    <div class="commandZone">
      <button id="paragraphBtn" class="btn">段落</button>
<!--       <select name="hstyle" id="hstyle">
        <option value="1">h1</option>
        <option value="2">h2</option>
        <option value="3">h3</option>
        <option value="4">h4</option>
        <option value="5">h5</option>
        <option value="h6">h6</option>
      </select> -->
      <button id="boldBtn" class="btn">加粗</button>
      <button id="undoBtn" class="btn">后退</button>
      <button id="redoBtn" class="btn">前进</button>
      <button id="insertHorizontalRuleBtn" class="btn">水平线</button>
      <button id="insertUnorderedListBtn" class="btn">无序列表</button>
      <button id="createLinkBtn" class="btn">插入链接</button>
      <button id="insertImageBtn" class="btn">插入图片</button>
    </div>
    <div class="editor" contenteditable="true"></div>
  </body>
  <script>
    var hStyle = '<h1>'
/*     document.getElementById('hstyle').onchange = function () {
      console.log('触发');
      var optionSelectedIndex = document.getElementsByTagName('option')
      hStyle = optionSelectedIndex[document.getElementById('hstyle').selectedIndex].innerHTML
      execEditorCommand('formatBlock', hStyle)
    } */
    
    function execEditorCommand(name, args = null) {
      document.execCommand(name, false, args)
    }

     document.getElementById('boldBtn').onclick = function () {
      // execEditorCommand('bold', null)
      execEditorCommand('insertHTML', '<sup>555</sup>')
    }
    document.getElementById('insertHorizontalRuleBtn').onclick = function () {
      execEditorCommand('insertHorizontalRule', null)
    }
    document.getElementById('insertUnorderedListBtn').onclick = function () {
      execEditorCommand('insertUnorderedList', null)
    }
    document.getElementById('undoBtn').onclick = function () {
      execEditorCommand('undo', null)
    }
    document.getElementById('redoBtn').onclick = function () {
      execEditorCommand('redo', null)
    }
    document.getElementById('paragraphBtn').onclick = function () {
      execEditorCommand('formatBlock', '<p>')
    }
    document.getElementById('createLinkBtn').onclick = function () {
      let link = window.prompt('请输入链接地址')
      execEditorCommand('createLink', link)
    }
    document.getElementById('insertImageBtn').onclick = function () {
      let image = window.prompt('请输入图片地址')
      execEditorCommand('InsertInputButton', image)
    } 
  </script>
</html>
